<template>
  <div class="base-rb-select" @mouseleave="showList = false">
    <span class="item-name" @mouseover="showList = true"
      >{{ localItem.name }}
      <i class="el-icon-arrow-down"></i>
    </span>
    <ul class="list" v-if="showList">
      <li v-for="item in list" :key="item.id" @click="selectItem(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "base-select",
  components: {},
  props: {
    item: {
      type: Object,
    },
    list: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      showList: false,
      localItem: {},
    };
  },
  mounted() {},
  computed: {},
  watch: {
    list() {
      if (!this.list || !this.list.length) return;
      this.localItem = this.item?.id ? this.item : this.list[0];
    },
    localItem() {
      this.$emit("update:item", this.localItem);
    },
  },
  methods: {
    selectItem(item) {
      this.localItem = item;
      this.showList = false;
    },
  },
};
</script>

<style lang='less' scoped>
.base-rb-select {
  display: inline-block;
  position: relative;
  font-size: 14px;
  .item-name {
    cursor: pointer;
  }
  .list {
    z-index: 996;
    background-color: #fff;
    box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 5%);
    border-radius: 4px;
    border: solid 2px #f5f5f5;
    position: absolute;
    top: 18px;
    left: 0;
    li {
      cursor: pointer;
      padding: 10px 20px;
      &:hover {
        background-color: #ebf5ff;
      }
    }
  }
}
</style>
